<template>
  <div class="Playlist">
    <discoverm></discoverm>

    <div
      style="
        width: 980px;
        height: 1500px;
        margin: 0 auto;
        padding: 40px;
        border-left: solid 1px;
        border-right: solid 1px;
        border-bottom: solid 1px;
      "
      class="head"
    >
      <h3 class="all">
        <span
          style="font-size: 24px; width: 900px; height: 42px; line-height: 42px"
          >{{this.pltitle}}</span
        >
        <el-dropdown @command="handleCommand" trigger="click">
          <span
            class="el-dropdown-link"
            style="margin-left: 15px; border: solid 1px; border-radius: 5px"
          >
            选择分类<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <el-dropdown-item command="全部">全部</el-dropdown-item>
            <el-dropdown-item command="华语">华语</el-dropdown-item>
            <el-dropdown-item command="流行">流行</el-dropdown-item>
            <el-dropdown-item command="摇滚">摇滚</el-dropdown-item>
            <el-dropdown-item command="民谣">民谣</el-dropdown-item>
            <el-dropdown-item command="电子">电子</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </h3>

      <div style="margin:0 auto;width:900px;height:1460px">
        <ul class="plmain">
          <li v-for="item in pl" class="liil" @click="toPlaylist(item.id)">
            <div style="position: relative">
              <img
                :src="item.coverImgUrl"
                alt=""
                style="width: 140px; height: 140px"
              />
              <div class="bottom">
                <span class="el-icon-headset" style="float: left"></span>
                <span
                  >{{
                    (item.playCount - (item.playCount % 10000)) / 10000
                  }}万</span
                >
                <span class="el-icon-video-play" style="float: right"></span>
              </div>
            </div>
            <a href="#"
              ><p style="font-size: 14px; height: 18px; overflow: hidden">
                {{ item.name }}
              </p></a
            >
            <a href="#">
              <p style="font-size: 8px; height: 18px; overflow: hidden">
                {{ item.creator.nickname }}
              </p></a
            >
          </li>
        </ul>
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="this.pageTotal"
      class="plelpa"
      @prev-click="prePage"
      @next-click="nextPage"
      @current-change="curPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import discoverm from "@/views/discoverM/discoverM.vue";
import Discover from "../discover/discover.vue";
import { getPlaylist } from "@/network/discover.js";
import axios from "axios";
export default {
  name: "Playlist",
  data() {
    return {
      //存储数据
      pl: [],
      //总页数
      pageTotal: 1,
      //总条数
      rows: 1,
      pageNo: 1, //当前页码
      pageSize: 35, //条数
    
      pltitle:this.$route.query.cat
    };
  },
  methods: {
      handleCommand(command) {
         this.$router.push("/discover/playlist?cat="+command)
            
          location.reload()
      },
    toPlaylist(id) {
      //跳转并携带数据
      this.$router.push("/playlistdetail?id=" + id);
    },
    getList(index) {
      this.pageNo = index || this.pageNo; //简便写法，意为当前页的值为index 或者 pageNo
      axios({
        url: "http://localhost:3000/top/playlist",
        method: "get",
        params: {
          limit: 35,
          offset: (this.pageNo - 1) * 35,
          cat:this.$route.query.cat
        },
      }).then((res) => {
        // for (var s = 0; s <= 34; s++) {
        //   this.pl.push(res.playlists[s]);
        // }
        this.pl = res.data.playlists;
        console.log(res);
        this.pageTotal = (res.data.total / 35) * 10;
      });
    },
    //当前页
    curPage(index) {
      this.getList(index);
      window.scrollTo(0, 0);
    },
    //上一页
    prePage() {
      if (this.pageNo > 1) {
        this.pageNo--;
        this.getList(this.pageNo);
        window.scrollTo(0, 0);
      }
    },
    //下一页
    nextPage() {
      if (this.pageNo < this.pageTotal) {
        this.pageNo++;
        this.getList(this.pageNo);
        window.scrollTo(0, 0);
      }
    },
  },

  components: {
    discoverm,
  },
  created() {
      this.getList(1);
  
    // getPlaylist().then((res) => {
    //   for (var s = 0; s <= 34; s++) {
    //     this.pl.push(res.playlists[s]);
    //   }
    //   console.log(res)
    // });

  
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  /* css3盒子模型 */
  box-sizing: border-box;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}

/* 去掉li 的小圆点 */
li {
  list-style: none;
}
a {
  color: #666;
  text-decoration: none;
}
.liil {
  width: 140px;
  height: 188px;
  margin: 0 20px;
  padding-bottom: 30px;
  float: left;
}

.plmain {
  margin-top: 30px;
  width: 900px;
  height: 1400px;
  margin-left: 27.5%;
  margin-top: 20px;
}
.all {
  width: 860px;
  border-bottom: 2px solid rgb(194, 12, 12);
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 27px;
  background-color: rgb(66, 58, 55, 0.7);
  padding: 8px;
  color: rgb(204, 204, 204);
  line-height: 12px;
  font-size: 12px;
}
.plelpa {
  position: absolute;
  bottom: -590px;
  left: 35%;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
